<!--
 * @Author: 叫我龟先生 yyxxkahhh@163.com
 * @Date: 2022-09-21 20:22:44
 * @LastEditors: 叫我龟先生 yyxxkahhh@163.com
 * @LastEditTime: 2022-09-24 11:02:40
 * @FilePath: \todolist\src\components\TodoFooter.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <footer class="footer">
    <!-- 6.3 -->
    <span class="todo-count">剩余<strong>{{len}}</strong></span>
    <ul class="filters">
      <li>
        <!-- 5.3 -->
        <a :class="{selected:type === 'all'}" 
        href="javascript:;" 
        @click="$emit('changeType','all')"
        >全部</a>
      </li>
      <li>
        <a :class="{selected:type === 'no'}" 
        href="javascript:;"
        @click="$emit('changeType','no')"
        >未完成</a>
      </li>
      <li>
        <a :class="{selected:type === 'yes'}"
        href="javascript:;" 
        @click="$emit('changeType','yes')"
        >已完成</a>
      </li>
    </ul>
    <!-- 7.1清除已完成，添加点击事件 -->
    <button class="clear-completed" 
    @click="$emit('clearTask')"
    >清除已完成</button>
  </footer>
</template>

<script>
export default {
props:{
  //5.4
  type:String,
  //6.2
  len:Number,
}
}
</script>